<template>
  <div>

    <div class="absolute top-2 left-5 text-xs	font-size: 0.75rem;">楼宇概览</div>
    <div style="margin-top: 16px;"></div>
    <div ref="chart1" style="width: 100%; height: 250px;"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

const chart1 = ref();

onMounted(() => {

  var myChart = echarts.init(chart1.value);

  var option = {

    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c}%'
    },
    legend: {
      data: [
        { name: '服务行业', itemStyle: { color: '#143d56', borderColor: '#0033ff' } },
        { name: '餐饮行业', itemStyle: { color: '#1d5a4e', borderColor: '#00ff66' } },
        { name: '科技行业', itemStyle: { color: '#15344c', borderColor: '#3333ff' } },
        { name: '创新行业', itemStyle: { color: '#164b56', borderColor: '#3366ff' } },
        { name: '教育行业', itemStyle: { color: '#165a3e', borderColor: '#00ff00' } }
      ],
      textStyle: {
        fontSize: 10,// 设置图例字体大小为12像素
        color: '#ddd',
      },
      itemWidth: 17, // 设置图例项的宽度
      itemHeight: 9,// 设置图例项的高度
    },
    series: [
      {
        name: '占比',
        type: 'funnel',
        left: '11%',
        top: '20%',
        width: '75%',
        height: '80%',
        label: {
          position: 'inside',
          formatter: '{c}%',
          fontSize: 8
        },
        labelLine: {
          show: false
        },
        itemStyle: {
          opacity: 0.7
        },
        emphasis: {
          label: {
            position: 'inside',
            formatter: '{b}: {c}%'
          }
        },
        data: [
          { value: 20, name: '服务行业', itemStyle: { color: '#143d56', borderColor: '#008B8B' } },
          { value: 13.3, name: '餐饮行业', itemStyle: { color: '#1d5a4e', borderColor: '#40E0D0' } },
          { value: 6.67, name: '科技行业', itemStyle: { color: '#15344c', borderColor: '#1E90FF' } },
          { value: 26.67, name: '创新行业', itemStyle: { color: '#164b56', borderColor: '#00BFFF' } },
          { value: 33.33, name: '教育行业', itemStyle: { color: '#165a3e', borderColor: '#32CD32' } }

        ],

      },


    ]
  };
  myChart.setOption(option);
})
</script>



<style lang="scss" scoped></style>